<template>
	<view>
		<uni-popup ref="popup" type="bottom" @maskClick="close()">
			<view class="bg-white ">
				<uni-section title="管理学生" type="circle">
					<template v-slot:right>
						<view @click="close">关闭</view>
					</template>
				</uni-section>
				<view class="padding-bottom-lg " style="padding :0px 20rpx 50rpx 20rpx" v-if="asdfasd">
					<view>{{title}}</view>
					<view style="display: flex;" class="" v-if="status!=null">
						<button :disabled="from.checkbox.length==0" @click="caozuoPL(4)"
							class=" cu-btn block bg-purple  font-12 fade-animation" style="margin-right: 10rpx;"
							v-if="$perms('system_scheduletimetable_quxiaopaike')&&status==0">取消</button>

						<button :disabled="from.checkbox.length==0" @click="truancy(null,false,0)"
							class=" cu-btn block bg-pink disabled   font-12 fade-animation" style="margin-right: 10rpx;"
							v-if="$perms('system_scheduletimetable_signOk')&&status==0">旷课</button>



						<button :disabled="from.checkbox.length==0" @click="cancelTruancy(null,true)"
							class=" cu-btn block bg-pink  font-12 fade-animation" style="margin-right: 10rpx;"
							v-if="$perms('system_scheduletimetable_quxiaopaike')&&status==2">取消旷课</button>

						<button :disabled="from.checkbox.length==0" @click="cancelsSign(null,true)"
							class=" cu-btn block bg-blue  font-12 fade-animation" style="margin-right: 10rpx;"
							v-if="$perms('system_scheduletimetable_quxiaopaike')&&status==1">取消签到</button>

						<button :disabled="from.checkbox.length==0" @click="revertCancels(null)"
							class=" cu-btn block bg-blue  font-12" style="margin-right: 10rpx;"
							v-if="$perms('system_scheduletimetable_quxiaopaike')&&status==4">恢复排课</button>

						<button v-if="$perms('system_scheduletimetable_signOk_super')&&status==0"
							:disabled="from.checkbox.length==0" @click="signOk(null,true,1)"
							class=" cu-btn block bg-grey  font-12 fade-animation" style="margin-right: 10rpx;"> 超签
						</button>
						<button :disabled="from.checkbox.length==0" @click="caozuoPL(1)"
							class=" cu-btn block bg-blue disabled   font-12 fade-animation" style="margin-right: 10rpx;"
							v-if="$perms('system_scheduletimetable_signOk')&&status==0">
							签到</button>
					</view>

					<view style="height: 4px;background-color: #ededed;margin: 10rpx 0px;"></view>


					<view class="margin-xs  radius" @click="checkboxChange2(item)" v-for="item in list"
						style="border-bottom: solid #e7e7e7 1px;margin-bottom: 20rpx;padding: 10rpx;">
						<view style="z-index:3;position: relative;"
							:class="{'bg-white':item.status!=4,'bg-red2':item.status==4}" class="padding-xs">
							<view style="display: flex;" class="juzhong">
								<uni-icons type="checkmarkempty" size="20" style="color: #999;"
									v-if="item.checkbox"></uni-icons>
								<view>
									<image style="width: 60rpx;height: 60rpx;"
										:src="getimg(item.customerModel.student)"></image>
								</view>

								<view style="font-weight: bold;flex: 2;font-size: 26rpx;">
									{{item.customerModel.student.name}}
								</view>
								<view class="font-12  " style="flex: 1;">
									{{item.status==0?'未签到':item.status==1?'已签到':item.status==4?'已取消':item.status==2?'旷课':'未知'}}
								</view>
								<view class="font-12" style="flex: 1;">
									{{ $getDictNameByValue('longTerm', item.longTerm) }}

								</view>
								<view class="font-12 " style="flex: 2;">
									{{item.vipContractModel!=null?item.vipContractModel.curriculumTitle:'试听'}}
								</view>
								<view>
								</view>
							</view>




						</view>

					</view>


					<view v-if="list.length==0">
						<blues-empty img="msg" text="暂无学生">

						</blues-empty>
					</view>
					<view style="display: flex;">
						<view style="flex: 3;" @click="addStudent()">
							<text class="login-btn cu-btn block bg-blue lg round">添加学生</text>
						</view>

					</view>
				</view>
			</view>
		</uni-popup>

		<addStudentVue ref="addStudentVue" @refresh="fetchData"></addStudentVue>
	</view>
</template>

<script>
	import {
		getShiJianDuanById,
		formatterUserName,
		pictureProcessing
	} from "@/utils/common";
	import {
		cancelsSign,
		cancelTruancy,
		doDelete,
		doExportExcel,
		doInsert,
		getList,
		getListByCustomerIdAndDate,
		signOk,
		truancy
	} from "@/api/system/academicAffairsCenter/scheduleTimetable/SysScheduleTimetableManagementApi";
	import addStudentVue from "@/pages/tenantSet/academicAffairsCenter/offlineClass/addStudent.vue";
	import {
		formatTime,
		isNull
	} from '@/utils/validate'

	export default {
		components: {
			addStudentVue
		},
		data() {
			return {
				title: '加载中',
				customerList: [],
				queryForm: {
					pageNo: 1,
					pageSize: 100,
					createTime_ORDER: "DESC",
					offlineTimetableId_EQ: null
				},
				from: {
					checkbox: []
				},
				asdfasd: true,
				status: null,
				list: [],
				total: 0,
				validTotal: 0,
			}
		},
		props: {

		},
		onLoad(e) {

		},
		methods: {
			shijianduan(cellValue) {
				return shijianduanaa(
					cellValue,
					getcommon("shijianduan")
				)

			},
			getimg(data) {
				return pictureProcessing(data)
			},
			open(data) {
				Object.assign(this.$data, this.$options.data());
				this.queryForm.offlineTimetableId_EQ = data.id
				this.queryForm.offlineTimetable = data
				this.title = "课时" + data.offlineClassKeshishu + "     " + data.startClassDate + "     " +
					getShiJianDuanById(data
						.sysTimeSlotId) + "     " + formatterUserName(data.principalTeacher) + "     " + this
					.$getDictNameByValue(
						'offline_class_name', data.offlineClassName)
				this.$refs.popup.open()
				this.fetchData()
			},

			addStudent() {
				this.$refs.addStudentVue.open(this.queryForm.offlineTimetable)
			},

			checkboxChange2(data) {


				if (this.status != null && this.status != data.status) {
					uni.showToast({
						title: "所选状态必须一致",
						icon: "none"

					})
					return
				}


				// 检查数组中是否存在元素1
				if (this.from.checkbox.includes(data.id)) {
					// 如果存在，则删除元素1
					this.from.checkbox = this.from.checkbox.filter(item => item != data.id);
				} else {
					// 如果不存在，则添加元素1
					this.from.checkbox.push(data.id);
				}



				if (data.checkbox == null || data.checkbox == false) {

					data.checkbox = true
					if (this.status == null) {
						this.status = data.status
					}
				} else {

					data.checkbox = false
				}



				if (this.from.checkbox.length == 0) {
					this.status = null
				}
				console.log(this.from.checkbox);
				this.$forceUpdate();

			},
			close() {
				Object.assign(this.$data, this.$options.data());
				this.$refs.popup.close()
				this.$emit('refresh')
			},
			async fetchData() {
				this.status = null
				this.from.checkbox = []
				const {
					data
				} = await getList(this.queryForm);
				if (!isNull(data)) {

					for (var dataKey in data.rows) {
						if (data.rows[dataKey].signTime != null) {
							data.rows[dataKey]["disabled"] = true
						}

					}
					this.list = data.rows;
					this.total = data.total;

					//展示有效人数
					var k = 0
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i].status != 4) {
							k++
						}
					}
					// this.total = k
					//有效数量
					this.validTotal = k
				}

			},


			//批量签到或者取消
			caozuoPL(type) {

				let _this = this
				if (type == 1) {



					uni.showModal({
						title: "签到",
						content: "确认签到吗",
						cancelText: "取消",
						confirmText: "确认",
						success: async function(res) {
							if (res.confirm) {
								_this.signOk(null, false, 1)
							} else if (res.cancel) {

							}
						}
					})

				}
				//批量取消
				if (type == 4) {

					uni.showModal({
						title: "取消排课",
						content: "请选择跟班类型",
						cancelText: "插班",
						confirmText: "跟班",
						success: async function(res) {
							if (res.confirm) {
								for (const s of _this.from.checkbox) {
									//批量取消
									if (type == 4) {
										_this.cancelCourseArrange2(s, 1)
										await _this.delay(2000);
									}
								}
							} else if (res.cancel) {
								for (const s of _this.from.checkbox) {
									//批量取消
									if (type == 4) {
										_this.cancelCourseArrange2(s, 2)
										await _this.delay(2000);
									}
									await _this.delay(1000);
								}
							}
						}
					})


				}

			},
			delay(ms) {
				return new Promise(resolve => setTimeout(resolve, ms));
			},
			//查看合同
			tiaozhuanhetong(id) {
				window.open("/#/contract?id=" + id);
			},
			tableAddClass({
				row,
				rowIndex
			}) {
				if (row.status == 4) {
					return 'tr-red';
				}
				return '';
			},

			rowStyle({
				row,
				rowIndex
			}) {

				if (row.status == 4) {
					let styleObj = {}
					styleObj.background = "rgb(255,217,217)"
					return styleObj;
				}


			},
			async truancy(row, type) {
				//选择要旷课的课程
				var truancydialogList = this.getselectDateList()

				for (const signdialogListElement of truancydialogList) {
					let {
						msg
					} = await truancy({
						id: signdialogListElement.id
					});
					await this.delay(1000);
				}
				this.fetchData();


			},
			async cancelTruancy(row) {

				//选择要旷课的课程
				var truancydialogList = this.getselectDateList()

				for (const signdialogListElement of truancydialogList) {
					let {
						msg
					} = await cancelTruancy({
						id: signdialogListElement.id
					});
					await this.delay(1000);
				}
				this.fetchData();

			},
			setSelectRows(val) {
				this.selectRows = val;
			},
			handleInsert(row) {
				this.$refs["edit"].showEdit({
					"currtype": this.offlineCurriculumType,
					"offlineTimetableId": this.queryForm.offlineTimetableId_EQ,
					"charu": true
				});
			},
			handleUpdate(row) {
				if (row.id) {
					this.$refs["edit"].showEdit(row);
				}
			},
			async cancelCourseArrange2(id, longTerm) {
				const {
					msg
				} = await doDelete({
					id: id,
					longTerm: longTerm
				});

				this.fetchData();

			},

			async cancelCourseArrange(row, longTerm) {
				row.longTerm = longTerm
				const {
					msg
				} = await doDelete(row);
				this.$baseMessage(msg, "success");
				this.handleDeleteId = null
				this.cancelCourseArrangedialogList = this.cancelCourseArrangedialogList.filter(item => item.id !== row
					.id);
				if (this.cancelCourseArrangedialogList.length == 0) {
					this.cancelCourseArrangedialogVisible = false
					this.fetchData();
				}
			},
			async handleDelete(row, type) {
				this.cancelCourseArrangedialogData.id = row.id
				if (type == 0) {
					this.cancelCourseArrangedialogList = []
					this.cancelCourseArrangedialogVisible = true
					const {
						msg,
						data
					} = await getListByCustomerIdAndDate({
						customerId: row.customerModel.id,
						date: formateDate(new Date(row.startClassDate), 'yyyy-MM-dd')
					});
					var cancelCourseArrangedialogList = data
					for (const signdialogListElement of cancelCourseArrangedialogList) {
						this.cancelCourseArrangedialogList.push({
							id: signdialogListElement.id,
							time: this.shijianduan(signdialogListElement.sysTimeSlotId),
							offlineClassName: this.$getDictNameByValue('offline_class_name',
								signdialogListElement.offlineClassName),
						})
					}
					this.cancelCourseArrangedialogTitle = "请选择《" + row.customerModel.student.name + "》今天需要取消的课程"
				}

			},

			async cancelsSign(row) {

				//选择要旷课的课程
				var truancydialogList = this.getselectDateList()

				for (const signdialogListElement of truancydialogList) {
					let {
						msg
					} = await cancelsSign({
						id: signdialogListElement.id
					});
					await this.delay(1000);
				}
				this.fetchData();


			},

			// 获取选中的行
			getselectDateList() {
				let asdf = []
				for (let s of this.from.checkbox) {
					for (let s1 of this.list) {
						if (s1.id == s) {
							asdf.push(s1)
						}
					}
				}

				return asdf
			},
			//签到 先选择要签到的课程  如果只有一个就直接签到 type 0就是选择课程 1就是直接签到
			async signOk(row, isSuper, type) {
				//选择要签到的课程

				if (type === 0) {

				}
				//超级签到
				if (type === 1) {
					let signdialogList = this.getselectDateList()
					for (const signdialogListElement of signdialogList) {
						const {
							msg
						} = await signOk({
							id: signdialogListElement.id,
							isSuper: isSuper
						});
						await this.delay(1000);
					}
					this.fetchData();
				}

			},


			//恢复取消
			async revertCancels(row) {

				let signdialogList = this.getselectDateList()
				for (const signdialogListElement of signdialogList) {
					const {
						msg
					} = await doInsert(signdialogListElement);
					await this.delay(1000);
				}
				this.fetchData();

			},

		}
	}
</script>

<style>
	/deep/uni-checkbox .uni-checkbox-input {
		width: 30rpx;
		height: 30rpx;
	}

	/deep/uni-button[disabled]:not([type]),
	uni-button[disabled][type="default"] {}

	.loader {
		border: 5px solid #f3f3f3;
		/* Light grey */
		border-top: 5px solid #3498db;
		/* Blue */
		border-radius: 50%;
		width: 50px;
		height: 50px;
		animation: spin 2s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>